// src/components/Counter.js

import React, { Component } from 'react';

/** 计数展示类 */
class Context extends Component {
  render() {
    return (
      <p>now value is: {this.props.value}</p>
    )
  }
}

// props 合法性验证.
Context.propTypes = {
  value: React.PropTypes.number.isRequired,
};

/** 计数类. */
export default class Counter extends Component {
  constructor() {
    super();
    // 初始化计数器.
    this.state = { value: 0 };
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>Count +1</button>
        <Context value={this.state.value} />
      </div>
    )
  }

  /**
   * 增加计数器计数 单击事件
   */
  handleClick () {
    this.setState({ value: this.state.value + 1 });
  }
}
